<template>
  <div class="prop-edit-wrapper">
    
    <!-- 可通行性 -->
    <div class="prop-edit-settings-wrapper" v-if="propEditing === 'pass'">
      <Icon class="prop-edit-setting center" size="32"
        v-bind:type="totalIcon(data.pass)"
        v-on:click="setDirection('pass')" />
    </div>
    
    <!-- 入向通行 -->
    <div class="prop-edit-settings-wrapper" v-if="propEditing === 'passIn'">
      <Icon class="prop-edit-setting left" size="16"
        v-bind:type="directionIcon(data.pass, 0)"
        v-on:click="setDirection('pass', 0)" />
      <Icon class="prop-edit-setting top" size="16"
        v-bind:type="directionIcon(data.pass, 1)"
        v-on:click="setDirection('pass', 1)" />                      
      <Icon class="prop-edit-setting right" size="16"
        v-bind:type="directionIcon(data.pass, 2)"
        v-on:click="setDirection('pass', 2)" />                      
      <Icon class="prop-edit-setting bottom" size="16"
        v-bind:type="directionIcon(data.pass, 3)"
        v-on:click="setDirection('pass', 3)" />                      
    </div>
    
    <!-- 出向通行 -->
    <div class="prop-edit-settings-wrapper" v-if="propEditing === 'passOut'">
      <Icon class="prop-edit-setting left" size="16"
        v-bind:type="directionIcon(data.pass, 0, true)"
        v-on:click="setDirection('pass', 4)" />
      <Icon class="prop-edit-setting top" size="16"
        v-bind:type="directionIcon(data.pass, 1, true)"
        v-on:click="setDirection('pass', 5)" />                      
      <Icon class="prop-edit-setting right" size="16"
        v-bind:type="directionIcon(data.pass, 2, true)"
        v-on:click="setDirection('pass', 6)" />                      
      <Icon class="prop-edit-setting bottom" size="16"
        v-bind:type="directionIcon(data.pass, 3, true)"
        v-on:click="setDirection('pass', 7)" />       
    </div>
    
    <!-- 视野阻挡 -->
    <div class="prop-edit-settings-wrapper" v-if="propEditing === 'vision'">
      <Icon class="prop-edit-setting center" size="32"
        v-bind:type="totalIcon(data.vision)"
        v-on:click="setDirection('vision')" />
    </div>
    
    <!-- 四方向视野阻挡 -->
    <div class="prop-edit-settings-wrapper" v-if="propEditing === 'visionArround'">
      <Icon class="prop-edit-setting left" size="16"
        v-bind:type="directionIcon(data.vision, 0, true)"
        v-on:click="setDirection('vision', 0)" />
      <Icon class="prop-edit-setting top" size="16"
        v-bind:type="directionIcon(data.vision, 1, true)"
        v-on:click="setDirection('vision', 1)" />                      
      <Icon class="prop-edit-setting right" size="16"
        v-bind:type="directionIcon(data.vision, 2, true)"
        v-on:click="setDirection('vision', 2)" />                      
      <Icon class="prop-edit-setting bottom" size="16"
        v-bind:type="directionIcon(data.vision, 3, true)"
        v-on:click="setDirection('vision', 3)" />       
    </div>
    
    <!-- 层级设置 -->
    <div class="prop-edit-settings-wrapper" v-if="propEditing === 'layer'">
      <Icon class="prop-edit-setting left" size="16"
        type="md-remove"
        v-on:click="setLayer(false)" />
      <div class="prop-edit-layer-setting">
        {{ data.layer }}
      </div>
      <Icon class="prop-edit-setting right" size="16"
        type="md-add"
        v-on:click="setLayer(true)" />
    </div>
  </div>
</template>

<script src="./propEdit.js"></script>

<style lang="stylus">
@import './propEdit.styl'
</style>
